<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全校学生成绩</title>
    <link rel="stylesheet" href="/css/layui.css">
</head>
<body>
<form class="layui-form" method="post">
    <div class="layui-inline">
        <!--<label class="layui-form-label">快速搜索</label>-->
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" id="keyword" name="keyword" placeholder="请输入学生姓名" autocomplete="off" class="layui-input">
        </div>
        <!--<label class="layui-form-label">考试时间</label>-->
        <div class="layui-input-inline" style="width: 200px" >
            <input type="text" id="startTime" name="startTime" placeholder="请选择查询的考试起始时间" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" id="endTime" name="endTime" placeholder="请选择查询的考试结束时间" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 200px">
            <select name="classesId">
                <option value="">请选择班级</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 200px">
            <select name="subjectId">
                <option value="">请选择科目</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 200px">
            <select name="teacherId">
                <option value="">请选择老师</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 200px" >
            <input type="text" id="lowScore" name="lowScore" placeholder="请输入查询的最低分" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" id="highScore" name="highScore" placeholder="请输入查询的最高分" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button  class="layui-btn" lay-submit lay-filter="doSearch">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!-- 表格 -->
<table class="layui-hide" id="schScore" lay-filter="schScore"></table>

</body>
<script src="/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table','layer','form','laydate'],function(){
        let table = layui.table;
        let layer=layui.layer;
        let form=layui.form;
        let laydate=layui.laydate;

        let tableInfo=table.render({
            elem: '#schScore'
            ,url:'/teacher/queryAllStuScore'
            ,title: '全校学生成绩表'
            ,totalRow: true
            ,cols: [  [
                {field:'id', title:'编号 ', width:80, fixed: 'left', unresize: true, sort: true,align:'center'}
                ,{field:'studentInfo',width:120, title: '学生姓名',align:'center', sort: true, templet:function (res) {
                        return res.studentInfo.studentName;
                    }}
                ,{field:'subjectInfo',width:80, title: '科目',align:'center',templet:function (res) {
                        return res.subjectInfo.subjectName;
                    }}
                ,{field:'classes',width:120, title: '班级',align:'center',templet:function (res) {
                        return res.classes.classesName;
                    }}
                ,{field:'teachers',width:150, title: '科目老师',align:'center',templet:function (res) {
                        return res.teachers.teachersName;
                    }}
                ,{field:'score', width:120,title: '分数',align:'center'}
                ,{field:'testTime', width:120,title: '考试时间', sort: true,align:'center'}
            ]  ]
            ,page: true
            ,response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.items //解析数据列表
                };
            }
        });

        //渲染日期组件
        laydate.render({
            elem:"#startTime",
            // type:"date" //默认是date，可以改成datetime
        });
        laydate.render({
            elem:"#endTime",
        });

        //用ajax查询班级
        $.get("/teacher/queryClass",function (res) {
            let selectInfo="";
            //循环遍历集合
            for (let i = 0; i <res.data.length ; i++) {
                selectInfo +="<option value='"+res.data[i].id+"'>"+res.data[i].classesName+"</option>"
            }
            //追加到下拉框列表中
            $("[name='classesId']").append(selectInfo);

            //更新渲染select下拉框
            form.render("select");
        },"json");

        //用ajax查询科目
        $.get("/teacher/querySubject",function (res) {
            let selectInfo="";
            //循环遍历集合
            for (let i = 0; i <res.data.length ; i++) {
                selectInfo +="<option value='"+res.data[i].id+"'>"+res.data[i].subjectName+"</option>"
            }
            //追加到下拉框列表中
            $("[name='subjectId']").append(selectInfo);

            //更新渲染select下拉框
            form.render("select");
        },"json");

        //用ajax查询老师姓名
        $.get("/teacher/queryAllTeacherName",function (res) {
            let selectInfo="";
            //循环遍历集合
            for (let i = 0; i <res.data.length ; i++) {
                selectInfo +="<option value='"+res.data[i].id+"'>"+res.data[i].teachersName+"</option>"
            }
            //追加到下拉框列表中
            $("[name='teacherId']").append(selectInfo);

            //更新渲染select下拉框
            form.render("select");
        },"json");

        //搜索事件
        form.on("submit(doSearch)",function (data) {
            tableInfo.reload({
                where:data.field,
                page:{
                    curr:1
                }
            });
            return false;
        })
    });
</script>
</html>